class Product {
    constructor() {
        // 获取数据的方法
        this.getData()
        // 绑定事件的方法
        this.bangding()
        // 这里设置一个全局的默认页数为1
        this.morenyeshu = 1
        // 设置一个锁为false
        this.suo = false
        //  获取页面中分页的节点  给其绑定点击事件,这里是获取分页的父元素给父元素委托实现
        this.$('.pagination').addEventListener('click', this.fenYe);
        this.ysdl()




    }
    // 右上角登录的点击事件
    ysdl = () => {
        let dl = this.$('#ysdl')
        // let zc = this.$('#zhuce')
        let name = localStorage.getItem('nickname')
        // console.log(name);
        // console.log(zc);
        if (name) {
            dl.innerHTML = name
            // zc.innerHTML = `<img src="../../html/课上代码/icon1.jpg" alt="" width='20px' height='20px'>`
        }
    }
    // 绑定事件的方法
    bangding() {
        // 给ul绑定点击事件
        // 因为是ul的事件回调方法，所以this指向ul
        // 给ul绑定点击事件
        this.$('.bd-ul ul').addEventListener('click', this.ulbd.bind(this))
        // 绑定滚动条事件
        window.addEventListener('scroll', this.gundong)


    }
    // 获取数据的方法
    // async  await  将这个函数内部变为同步
    async getData(page = 1) {
        // console.log(111);
        // 解构赋值，取出data和status
        let { data, status } = await axios.get('http://localhost:8888/goods/list?current=' + page)
        // console.log(data, status);
        // 判断status和code的值
        if (status != 200 && data.code != 1) throw new Error('获取失败')
        let html = ''
        data.list.forEach(ele => {
            // console.log(ele);
            html += `<li data-id="${ele.goods_id}" class="lili">
            <div class="body-box ">
                <div class="body-box-img">
                    <div class="body-box-img-1" href="./shopping">
                        <img src="${ele.img_big_logo}">
                    </div>
                </div>
                <div class="box-name">
                    <div class="box-name-1">
                        ${ele.title}
                    </div>
                </div>
                <div class="body-box-rmb">
                    <div class="body-box-rmb-1">
                        ${ele.price}
                    </div>
                </div>
            <a href="#none" id="but-a" class="sk-goods-buy">立即购买</a>
            </div>
            </li>`
        });
        // console.log(html);
        // let jiedian = document.querySelector('.bd-ul ul')
        // console.log(jiedian);
        // jiedian.innerHTML += html
        // 把获取的html追加到页面中
        // this.$('.bd-ul ul').innerHTML += html
        if (((this.morenyeshu) % 5) != 0) {
            this.$('.bd-ul ul').innerHTML += html;
        }
        // 在懒加载的基础上分页就需要在拼接后直接++
        this.morenyeshu++
        // 点击跳转到详情
        this.tiaozhuan()
        // 登录过期的处理
        if (data.code == 401 && status == 200) {

            // 登录超时就清除保存的值
            localStorage.removeItem('token')
            localStorage.removeItem('user_id')

            // 跳转到购物车当登录后跳转到本页面
            location.assign('./login.html?ReturnUrl=./shopcar2.html')
        }

    }
    // 跳转详情
    tiaozhuan() {
        this.$('.lili').forEach((k, v) => {
            // console.log(k.dataset.id);
            k.onclick = (ele) => {
                // console.log(ele.target);
                if (ele.target.nodeName == 'DIV' || ele.target.nodeName == 'IMG' && ele.target.className != 'sk-goods-buy') {
                    localStorage.setItem('gid', k.dataset.id)
                    location.assign('./shopping.html')
                }
            }
        })
    }
    // 点击ul的回调方法
    ulbd(even) {
        // console.log(this);
        // 获取事件源
        // console.log(even.target);
        // console.log(even.target.className)
        // if (even.target.nodeName == 'DIV' || even.target.nodeName == 'IMG' && even.target.className != 'sk-goods-buy') {
        // location.assign('./shopping.html')
        // console.log(even.target);
        // console.log(even.target.parentNode.dataset.id);
        // let goodsid = even.target.parentNode.dataset.id
        // console.log(goodsid);
        // }
        // 判断点击的不是立即抢购的按钮的时候就直接return
        if (even.target.nodeName != 'A' || even.target.className != 'sk-goods-buy') return
        // console.log(even.target);

        // 判断用户是否登录  如果local中有token表示登录。没有就表示未登录
        let token = localStorage.getItem('token')
        // 这个时候的local中没有token，需要跳转到登录界面
        // console.log(token);
        // 判断token为空就跳转  
        if (!token) location.assign('./login.html?ReturnUrl=./product.html')
        // 判断如果用户已经登录就把商品加入购物车
        // 获取商品id
        let liid = even.target.parentNode.parentNode.dataset.id
        // console.log(even.target.parentNode.parentNode.dataset.id);
        let yonghuid = localStorage.getItem('user_id')
        // 把获取的两个id通过行参传递到回调函数 中
        this.tianjiagwc(liid, yonghuid)
    }
    // 接受了两个id 点击加入购物车的方法
    tianjiagwc(lid, yhid) {
        // console.log(lid, yhid);
        // 加入购物车是post请求，这里发送请求并携带两个参数
        // 给添加购物车接口发送请求
        // 购物车的请求需要判断是否是登录状态，需要携带参数token
        const AUTH_TOKEN = localStorage.getItem('token')
        let param = `id=${yhid}&goodsId=${lid}`
        axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
        axios.post('http://localhost:8888/cart/add', param).then(res => {
            // console.log(res);
            // console.log(res);
            let { status, data } = res
            // console.log(status, data);
            // 判断是否添加购物车成功,成功就弹出是否跳转购物车的模态框
            if (data.code == 1 && status == 200) {
                layer.open({
                    title: '商品添加成功'
                    , content: '是否查看购物车'
                    , btn: ['确认', '取消']
                    , yes: function (index, layero) {
                        // console.log('去购物车');
                        location.assign('./shopcar2.html')
                    }
                });
                // 当登录超时过期的时候就重新跳转登录界面
            } else if (data.code == 401 && status == 200) {

                // 登录超时就清除保存的值
                localStorage.removeItem('token')
                localStorage.removeItem('user_id')

                // 跳转到购物车
                location.assign('./login.html?ReturnUrl=./product.html')

                // 否则就弹出失败模态框
            } else {
                layer.confirm('没有登录', {
                    title: '跳转到登录页面'
                }, function () {
                    location.assign('./login.html')
                });
            }
        })

    }
    // 懒加载
    gundong = () => {
        // 需要 滚动条 可视区 内容的高度
        // 获取滚动条高度
        let gd = document.documentElement.scrollTop;
        // console.log(gd);
        // 获取可视区的高度
        let ksq = document.documentElement.clientHeight
        // console.log(ksq);
        // 获取内容的高度
        let nr = this.$('#bd-goods').offsetHeight
        // console.log(nr);
        //  因为还有一个头部的高度，所以需要加上
        let nrtb = nr + 360
        // 当滚动条的高度加上可视区的高度大于内容高度加头部高度的时候就加载新数据
        if (gd + ksq > nrtb) {
            // console.log(111);
            // 当条件达成的时候调用获取数据的方法
            // 因为它会直接全部加载出来，需要使用节流和防抖让其在规定时间内只执行一次
            // 因为设置的全局的锁为false,所以第一次执行的时候就不会return
            // 就会开启定时器，并获取列表，，
            // 当第二次执行的时候它的状态为true，就会直接return。
            // 当在指定时间时候才会开锁
            // console.log(this.suo);
            if (this.suo) return
            this.suo = true;
            // 指定一个时间开启锁
            setTimeout(() => {
                this.suo = false
            }, 1000);
            // 设置了全局变量this.morenyeshu为1,当每次调用获取数据的方法的时候就自增这个变量，再传值给获取数据的方法
            // 获取数据的方法页数的初始值为1，每次在这里调用的时候页数都会+1 
            if (this.morenyeshu % 5 == 0) return
            // 本来是每次都++，加分页以后就需要在拼接的哪里++
            this.getData(this.morenyeshu)
        }
    }
    // 分页
    // 分页的实现
    fenYe = (event) => {
        // 这里获取页码的节点
        let node = event.target;
        // console.log(node);
        //   这里我们设置一个页面可以出现的最多商品的数量的变量
        let num = 5;
        this.morenyeshu = num * (node.innerHTML - 1) + 1;
        // if (node.innerHTML == 1) {
        //     this.morenyeshu == 3
        // }
        //    console.log(morenyeshu);
        //   这里要实现,点击分页按钮清空页面中服务器追加的内容
        //   console.log(morenyeshu);
        this.$('.bd-ul ul').innerHTML = ' ';
        this.gundong()
        //   console.log(node)
    }
    // 封装一个获取节点的方法
    $(ele) {
        let res = document.querySelectorAll(ele)
        return res.length == 1 ? res[0] : res;
    }
}
new Product;